import React from 'react'
import {connect} from 'react-redux'
import {incrementAction,decreaseAction} from '../../redux/action'
/* 
    react-redux可以让仓库和组件连起来的具体步骤
    1.在index.js入口文件中首先导入Provider
    2.使用<Provider>将<App>组件给包裹起来
        <Provider store={store}>
            <App />
        </Provider>
    3.如果向让普通组件连接仓库要使用connect这个高阶组件
    什么是高阶组件
    将一个组件作为另外一个参数传递给一个函数，这个函数返回一个新的组件，这个新的组件就称为一个高阶组件
    高阶组件是对我们普通组件的一个增强

    使用connect可以将store仓库直接连接到组件上(普通组件)，简言之就是将store中的数据变成了本组件props属性中的数据
    connect第一个小括号中的第一个参数就是用来接收store仓库中state数据的回调函数
    */
function Counter(props) {
  console.log('props',props);
  const increment=()=>{
    props.dispatch(incrementAction(1))
  }
  const decrease=()=>{
    props.dispatch(decreaseAction(2))
  }
  return (
    <div>
        <h1>计数器:{props.n}</h1>
        <button onClick={()=>{increment()}}>+</button>
        <button onClick={()=>{decrease()}}>-</button>
    </div>
  )
}
const mapStateToProps=(state)=>{
    return{
        n:state.num
    }
}
 export default connect(mapStateToProps)(Counter)
